<ng-template #default let-noTitle>
  <div *ngIf="!noTitle && title" class="sf__title">{{ title }}</div>
  <ng-container *ngIf="grid; else noGrid">
    <div nz-row [nzGutter]="grid.gutter">
      <ng-container *ngFor="let i of list">
        <ng-container *ngIf="i.property.visible && i.show">
          <div nz-col [nzSpan]="i.grid.span" [nzOffset]="i.grid.offset" [nzXs]="i.grid.xs" [nzSm]="i.grid.sm"
            [nzMd]="i.grid.md" [nzLg]="i.grid.lg" [nzXl]="i.grid.xl" [nzXXl]="i.grid.xxl">
            <sf-item [formProperty]="i.property" [fixed-label]="i.spanLabelFixed"></sf-item>
          </div>
        </ng-container>
      </ng-container>
    </div>
  </ng-container>
  <ng-template #noGrid>
    <ng-container *ngFor="let i of list">
      <ng-container *ngIf="i.property.visible && i.show">
        <sf-item [formProperty]="i.property" [fixed-label]="i.spanLabelFixed"></sf-item>
      </ng-container>
    </ng-container>
  </ng-template>
</ng-template>
<nz-card *ngIf="type === 'card'; else default" [nzTitle]="cardTitleTpl" [nzExtra]="ui.cardExtra"
  [nzSize]="ui.cardSize || 'small'" [nzActions]="ui.cardActions || []" [nzBodyStyle]="ui.cardBodyStyle!"
  [nzBordered]="ui.cardBordered || true" [nzBorderless]="ui.cardBorderless || false" class="sf__object-card"
  [class.sf__object-card-fold]="!expand">
  <ng-template #cardTitleTpl>
    <div [class.point]="showExpand" (click)="changeExpand()">
      <i *ngIf="showExpand" nz-icon [nzType]="expand ? 'down' : 'up'" class="mr-xs text-xs"></i>
      {{ title }}
    </div>
  </ng-template>
  <ng-template [ngTemplateOutlet]="default" [ngTemplateOutletContext]="{ $implicit: true }"></ng-template>
</nz-card>
<nz-tabset>
  <nz-tab *ngFor="let i of tabList" [nzTitle]="i.property.schema.title">
    <ng-container *ngIf="i.property.visible && i.show">
      <sf-item [formProperty]="i.property" [fixed-label]="i.spanLabelFixed"></sf-item>
    </ng-container>
  </nz-tab>
</nz-tabset>
